<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rect_circle_ellipse</title>
</head>
<body style="display:flex;gap: 50px;">
    <div> 
        <div>路径, L大写:绝对坐标, l小写:相对上一个点的坐标</div> 
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <path d="M150 0 L75 110 L200 110"/>
        </svg>
         
        <div>贝塞尔曲线</div> 
        <svg width="450" height="400">
            <rect width="450" height="400" fill="#eee"/>
            <path d="M 10 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
        </svg>
         
        <div>二次贝塞尔曲线</div> 
        <svg width="450" height="400">
            <rect width="450" height="400" fill="#eee"/>
            <path d="M 10 350 q 150 -300 300 0 T 400 0" stroke="blue" stroke-width="5" fill="none" />
        </svg>
    </div> 
</body>
</html>